import React from "react";
import styles from "./Button.module.css";
import { Tooltip, TooltipProps } from "../Tooltip/Tooltip";

export interface ButtonProps
    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: "primary" | "secondary" | "danger";
    size?: "small" | "medium" | "large";
    loading?: boolean;
    loadingText?: string;
    tooltip?: React.ReactNode;
    tooltipProps?: Omit<TooltipProps, "children" | "content">;
}

export const Button: React.FC<ButtonProps> = ({
    children,
    variant = "secondary",
    size = "medium",
    loading = false,
    loadingText,
    tooltip,
    tooltipProps,
    className,
    disabled,
    ...props
}) => {
    const variantClass = styles[`button-${variant}`] || "";
    const sizeClass = styles[`button-${size}`] || "";
    const loadingClass = loading ? styles.loading : "";

    const button = (
        <button
            className={`${
                styles.button
            } ${sizeClass} ${variantClass} ${loadingClass} ${className || ""}`}
            disabled={disabled || loading}
            {...props}
        >
            {loading && (
                <>
                    <span className={styles.spinner} />
                    {loadingText && (
                        <span className={styles.loadingText}>
                            {loadingText}
                        </span>
                    )}
                </>
            )}
            {!loading && children}
        </button>
    );

    return tooltip ? (
        <Tooltip content={tooltip} {...tooltipProps}>
            {button}
        </Tooltip>
    ) : (
        button
    );
};
